<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="scene-DRC-info-widget" :style="getStyle('head')">
      <div class="view-divider"></div>
      <!--科室信息:1-科室 2-号别 3-诊室-->
      <div class="dept-room" :class="getDeptHideClassName" :style="[getStyle('deptArea'),getStyle('borArea')]">
        <p class="dept item" v-if="optionsInfo.checkList.includes(1)" :style="getStyle('deptAreaInfo')">
          <ScrollX>{{ getRoomDiffInfo || '\u00a0' }}</ScrollX>
        </p>
        <p class="dept item" v-if="optionsInfo.checkList.includes(2)" :style="getStyle('deptAreaInfo')">
          <ScrollX>{{ getParentRegisterObjName || '\u00a0' }}</ScrollX>
        </p>
        <p class="room item" :style="getStyle('roomAreaInfo')">
          <ScrollX>
            {{ getRoomDeptInfo[optionsInfo['roomNameKey']] || getRoomDeptInfo['roomName'] || '\u00a0' }}
          </ScrollX>
        </p>
      </div>

      <!--医生信息-->
      <template v-for="item in getRoomDoctorInfo">
        <div :class="['doctor-info','clearfix', `doctor-info-${optionsInfo.docInfoMode || 1}`]" :style="getStyle('borArea')">
          <div class="picture flex-box-left">
            <img :src="getDoctorPicture(item)" alt="医生" @error='handleError'/>
          </div>
          <div class="info clearfix" :class="'info-mode-'+optionsInfo.docInfoMode" :style="getStyle('borArea')">
            <div class="left-info">
              <div class="name" :style="getStyle('doctorName')">
                <ScrollX>{{ (item.workerName) || '\u00a0' }}</ScrollX>
              </div>
              <div class="level">
                <ScrollX>{{ (item.workerTitle) || '\u00a0' }}</ScrollX>
              </div>
              <div class="doctor-code" v-if="optionsInfo.doctorCodeHide&&!!(item.workerBusinessCard)">
                <div class="code-picture">
                  <img :src="`${item.workerBusinessCard}`" alt="医生二维码">
                </div>
                <div class="describe">扫码预约</div>
              </div>
            </div>

            <div class="doctor-connect" :style="getStyle('borArea')">
              <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
              <div class="container">
                <!-- 组件接受两个参数，content：滚动的文字内容；pageDuration滚动一页需要的时间 -->
                <ScrollY :content="(item.workerIntro) || '\u00a0'" :pageDuration="10"/>
              </div>
            </div>
          </div>
        </div>
        <div class="view-divider"></div>
        <!--患者信息  二维码-->

          <div class="patient-info" :class="`patient-info-${optionsInfo.docInfoMode || 1}`">
            <div class="item current-patient"
                 :class="getPatientClassName('current-patient',item)" :style="getStyle('borArea')">
              <div class="title " :style="getStyle('borArea')">{{ optionsInfo['currentPatientContent'] || '就诊' }}</div>
              <div class="content " :class="{'current-patient-info': scrollInfo(item)}">
                <div class="scroll-info" v-if="scrollInfo(item)">
                  <vue-seamless-scroll
                    class="scroll"
                    :class="{'scroll-hide-waiting': optionsInfo.waitingPatientHide}"
                    :ref="`scroll-${item.workerId}`"
                    @ScrollEnd="(e)=>handleScrollEnd(e, item)"
                    :class-option="optionScroll2"
                    :data="(item.treatingPatient)"
                  >
                    <template v-for="PatientItem in (item.treatingPatient)">
                      <p class="item">
                        {{ (PatientItem.orderNo) || '&nbsp;' }}
                        {{ (PatientItem.patientName) || '&nbsp;' }}&nbsp;就诊
                      </p>
                    </template>
                  </vue-seamless-scroll>
                </div>
                <p class="no-scroll-info" v-else>
                  <template v-for="PatientItem in (item.treatingPatient)">
                    {{ (PatientItem.orderNo) || '&nbsp;' }}
                    {{ (PatientItem.patientName) || '&nbsp;' }}&nbsp;就诊
                  </template>
                </p>
              </div>
            </div>

            <div class="wait-body clearfix" v-if="!(optionsInfo.waitingPatientHide)">
              <div class="item wait-patient"
                   :class="getPatientClassName('wait-patient',item)" :style="getStyle('borArea')">
                <div class="title " :style="getStyle('borArea')">{{ optionsInfo['waitingPatientContent'] || '候诊' }}</div>
                <template v-if="waitPatientTypeInfo ===1">
                  <div class="content ">
                    <div class="wait-wrap clearfix">
                      <p v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                         :key="`${item2.patientIdNo}-${index}`">
                        {{ item2.orderNo.trim().toString()!=''?('('+item2.orderNo+')'):'' }} {{ item2.patientName || '&nbsp;' }}&nbsp;请等候
                      </p>
                    </div>
                  </div>
                </template>
                <template v-else-if="waitPatientTypeInfo ===2">
                  <div class="content  scroll-area"
                       :class="{'scroll-area-all': getWaitingPatientList(item.waitingPatientList).length>6 }">
                    <template
                      v-if="(optionsInfo.openScroll)&&(optionsInfo.waitPatientNumber)>(optionsInfo.waitPatientScrollNumber)">
                      <vue-seamless-scroll
                        class="scroll"
                        :ref="`scroll-${item.workerId}`"
                        @ScrollEnd="(e)=>handleScrollEnd(e, item)"
                        :class-option="optionScroll"
                        :data="getWaitingPatientList(item.waitingPatientList)"
                      >
                        <div class="inside-content" :class="getWaitPatientNumber((item.waitingPatientList), true)">
                          <p class="patient"
                               v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                               :key="`${(item2.queuingId) || index}-${(item2.patientIdNo) || index}`"
                          >
                            <span class="patient-orderNo" v-if="!!(item2.orderNo)">
                              {{ item2.orderNo.trim().toString()!=''?('('+item2.orderNo+')'):'' }}
                            </span>
                            <template>
                              {{ item2.patientName || '' }}&nbsp;请等候
                            </template>
                          </p>
                        </div>
                      </vue-seamless-scroll>
                    </template>
                    <template v-else>
                      <div class="no-scroll-area" :class="getWaitPatientNumber((item.waitingPatientList), false)">
                        <p v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                           :key="`${item2.patientIdNo}-${index}`">
                          {{ item2.orderNo.trim().toString()!=''?('('+item2.orderNo+')'):'' }} {{ item2.patientName || '&nbsp;' }}&nbsp;请等候
                        </p>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
              <div class="wait-right">
                <div class="ewm-body">
                  <template v-if="!!(optionsInfo?.hospitalCode)&&!!(optionsInfo?.hospitalCode?.length)">
                    <img :src="optionsInfo?.hospitalCode[0].url || code1" alt="医院公众号"/>
                  </template>
                </div>
                <div class="ewm-tips" :style="getStyle('hosCode')">
                  <ScrollY :content="(optionsInfo.hosCodeTips) || '\u00a0'" :pageDuration="2"/>
                </div>
              </div>
            </div>


        </div>
        <!--        `patient-info-${optionsInfo.docInfoMode || 1}`-->

        <!--        -->
        <div class="infos-body" :style="getStyle('notice')">
          <ScrollY :content="(optionsInfo.noticeTips) || '\u00a0'" :pageDuration="4"/>
        </div>
      </template>
    </div>
  </CompOperate>
</template>

<script>
import {pxToVw} from '@/utils/common';
import emitter from "@/utils/designer/emitter";
import {NoticeBar, Swipe, SwipeItem} from "vant";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue';
import ScrollY from '@c/public/seamlessScroll/ScrollY.vue';
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-room-info-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      states: true,
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
      code1: require("@a/images/design/placeholder-code.png"),
    }
  },

  computed: {
    // 候诊列表等待--滚动设置
    optionScroll() {
      let {openScroll, waitPatientScrollNumber, waitPatientStep} = (this.optionsInfo)
      return {
        hoverStop: true,
        direction: 1,                               // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitPatientStep - 1], // 数值越大速度滚动越快
        limitMoveNum: openScroll ? waitPatientScrollNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    optionScroll2() {
      let {waitPatientStep} = (this.optionsInfo)
      return {
        hoverStop: true,
        direction: 1,                               // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitPatientStep - 1], // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 判断候诊模式
    waitPatientTypeInfo() {
      let {waitPatientType = 1} = this.optionsInfo;
      return waitPatientType
    },

    // 判断当前患者是否滚动
    scrollInfo() {
      return function (info) {
        return !!(info.treatingPatient) && (info.treatingPatient.length) > 1
      }
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case 'head':
            Reflect.set(Obj, 'height', pxToVw(info.headHeight));
            Reflect.set(Obj, 'backgroundColor', `${(info.backgroundColor)}`);
            break;
          case 'deptArea':
            Reflect.set(Obj, 'backgroundColor', `${(info.deptAreaBgColor)}`);
            break;
          case 'deptAreaInfo':
            Reflect.set(Obj, 'color', `${(info.deptColor)}`);
            Reflect.set(Obj, 'fontSize', pxToVw(info.deptFontsize));
            break;
          case 'roomAreaInfo':
            Reflect.set(Obj, 'color', `${(info.roomColor)}`);
            Reflect.set(Obj, 'fontSize', pxToVw(info.roomFontsize));
            break;
          case 'picture':
            Reflect.set(Obj, 'height', pxToVw(info.imageHeight));
            Reflect.set(Obj, 'width', pxToVw(info.imageWidth));
            Reflect.set(Obj, 'borderRadius', pxToVw(info.imageRadius));
            break
          case 'notice':
            Reflect.set(Obj, 'backgroundColor',`${(info.noticeTipsBgColor)}`);
            Reflect.set(Obj, 'color', `${(info.noticeTipsColor)}`);
            Reflect.set(Obj, 'fontSize',  pxToVw(info.noticeTipsFontSize));
            break
          case 'hosCode':
            Reflect.set(Obj, 'color', `${(info.hosCodeColor)}`);
            break;
          case 'doctorName':
            Reflect.set(Obj, 'fontWeight', (info.doctorFontWeight) || 'normal');
            break;
          case 'borArea':
            Reflect.set(Obj, 'borderColor', `${(info.areaBorColor)}`);
            break;

        }
        return Obj;
      }
    },

    // 获取当前患者号别或原科室
    getParentRegisterObjName() {
      const self = this;
      let {checkList, registerObjNameKey, registerSource, relationRegister} = (self.optionsInfo);
      console.log(relationRegister);
      let boolean = checkList.includes(2);
      let boolean2 = checkList.includes(1);
      let listInfo = (this.getRoomDoctorInfo);
      let roomDeptInfo = (this.getRoomDeptInfo);
      if (boolean) {
        // 号别来源当前医生呼叫的患者
        if (registerSource === 2) {
          if (!!(listInfo?.length)) {
            let patientList = Array();
            if (listInfo[0]?.treatingPatient?.length) {
              patientList = listInfo[0].treatingPatient
            } else if (listInfo[0]?.preTreatingPatient?.length) {
              patientList = listInfo[0].preTreatingPatient
            } else {
              patientList = Array()
            }
            if (patientList?.length) {
              let registerObjNameInfo = Array();
              patientList.forEach((item) => {
                let temp = (item[registerObjNameKey] || item['registerObjName']);
                if (!!temp) {
                  registerObjNameInfo.push(temp)
                }
              })
              // 去重
              let registerObjName = self.$lodash.compact(registerObjNameInfo);
              if (!!registerObjName && !!(registerObjName.length)) {
                return self.$lodash.uniq(registerObjName).join(',')
              }
            } else {
              return '\u00a0'
            }
          } else {
            if (relationRegister) {
              return (roomDeptInfo?.registerObjName) || '\u00a0'
            } else {
              return '\u00a0'
            }
          }
        } else {
          // 号别来源当前医生所在科室号别
          return (roomDeptInfo?.registerObjName) || '\u00a0'
        }
      } else if (boolean2) {
        return '\u00a0'
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row?.workerPicture) || header
        } else {
          return this.pause;
        }
      }
    },

    getDeptHideClassName() {
      let {checkList, deptRoomPosition, roomeInfoReverse} = (this.optionsInfo);
      if (checkList && (checkList.length === 1) && checkList[0] === 3) {
        return 'dept-room-hideDept'
      } else {
        if (deptRoomPosition) {
          return 'dept-room-position'
        }
      }
    },

    // 诊室等待--设置不同模式下的等待患者样式
    getPatientClassName() {
      let {waitMode, waitingPatientHide} = (this.optionsInfo);
      return function (type, row) {
        let waitLen = row?.waitingPatientList?.length || 1
        if (!waitingPatientHide) {
          switch (type) {
            case 'current-patient':
              return parseInt(waitMode) !== 1 ? 'current-patient' : 'current-patient2'
            case 'wait-patient':
              switch (waitMode) {
                case 1:
                  return 'wait-patient-1'
                case 2:
                  return 'wait-patient-2'
                case 3:
                  return 'wait-patient-3'
                case 4:
                  return 'wait-patient-4'
                case 5:
                  return 'wait-patient-5'
                case 6:
                  return 'wait-patient-6'
              }
          }
        } else {
          return 'hide-waiting-patient'
        }
      }
    },

    // 候诊等待
    getWaitPatientNumber() {
      return function (row, scroll) {
        let waitingPatientList = this.getWaitingPatientList(row);
        if (scroll) {
          if (Array.isArray(waitingPatientList)) {
            return `scroll-area-${waitingPatientList.length}`
          } else {
            return `scroll-area`
          }
        } else {
          if (Array.isArray(waitingPatientList)) {
            if (waitingPatientList.length >= 6) {
              return `no-scroll-area-6`
            } else {
              return `no-scroll-area-${waitingPatientList.length}`
            }
          } else {
            return `no-scroll-area`
          }
        }
      }
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDoctorInfo'];
      let list = devType ? (roomDoctorInfo.apiData) : (roomDoctorInfo.mockData)
      if (!!(list?.length)) {
        return list.slice(0, 1);
      } else {
        return [{}];
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDeptInfo'];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    // 科室可能因为医生是否登录会有差异
    getRoomDiffInfo() {
      let list = (this.getRoomDoctorInfo);
      let deptInfo = (this.getRoomDeptInfo)
      if (list?.length) {
        return list[0].deptName || deptInfo?.deptName || '\u00a0'
      } else {
        return deptInfo?.deptName || '\u00a0'
      }
    },

    // 候诊患者截取
    getWaitingPatientList() {
      return function (row) {
        let {waitPatientType, waitMode, waitPatientNumber} = (this.optionsInfo);
        switch (waitPatientType) {
          case 1:
            return (!!row && !!(row?.length)) ? row.slice(0, waitMode) : []
          case 2:
            return (!!row && !!(row?.length)) ? row.slice(0, waitPatientNumber) : []
        }
      }
    },


    //截取字符串长度
    sliceStrInfo() {
      return function (str, number) {
        if (str?.length) {
          return (str?.length > number) ? str.slice(0, number) : str;
        } else {
          return '\u00a0';
        }
      }
    }
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDeptInfo":
          this.states = true;
          buildParent.executeParentMethod('writeLog', JSON.stringify({
            sign: '模板日志-科室信息',
            key: key,
            data: data
          }));
          this.$store.dispatch('setRoomDeptInfo', data)
          break
        case "roomDoctorInfo":
          this.states = true;
          buildParent.executeParentMethod('writeLog', JSON.stringify({
            sign: '模板日志-医生信息',
            key: key,
            data: data
          }));
          this.$store.dispatch('setRoomDoctorInfo', this.$lodash.cloneDeep(data))
          break
      }
    },

    // 滚动结束
    handleScrollEnd() {

    },

    handleError(event) {
      const loadedImg = event.target;
      this.states = false;
    }
  },


  watch: {
    field: {
      handler: function (val) {
        let key = val.options.config;
        let data = val.options[key];
        if (!Reflect.has(data, 'docInfoMode')) {
          data['docInfoMode'] = 1
        }
        this.optionsInfo = data;
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },

};
</script>

<style lang="scss" scoped>
/*清除浮动*/
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
  clear: both;
}
.clearfix {
  zoom: 1;
  overflow: hidden;
}
.scene-DRC-info-widget {
  *{
    box-sizing: border-box;
  }
  padding: 12px 0;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 150px;
  font-size: 40px;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
  .view-divider {
    height: 8px;
    background: #B1EFFF;
    border: 3px solid #9DD3FF;
  }
  .infos-body{
    margin-top: 25px;
    height: 208px;
    background: #D9FDFF;
    font-weight: 800;
    font-size: 45px;
    color: rgba(187, 44, 84, 1);
    line-height: 1.5;
    padding: 5px 40px;
    overflow: hidden;
  }
  //科室
  .dept-room {
    margin: 12px 40px 0;
    padding: 0 30px;
    overflow: hidden;
    height: 248px;
    border-radius: 40px 40px 0 0;
    border: 3px solid #5999D5;

    p {
      color: #FFFFFF;
      text-align: center;
      padding: 0;
    }

    .dept {
      font-weight: 500;
      font-size: 80px;
      line-height: 110px;
      text-align: center;
      @include singleEllipsis(100%);
    }

    .room {
      height: 138px;
      line-height: 138px;
      font-size: 120px;
      text-align: left;
      font-style: normal;
      @include singleEllipsis(100%);

      :deep(.st-inner) {
        margin: 0;
      }
    }

  }

  //隐藏科室
  .dept-room-hideDept {
    display: flex;
    align-items: center;
    align-self: center;
  }

  // 科室诊室调整上下位置
  .dept-room-position {
    display: flex;
    flex-direction: column-reverse;
  }

  //医生信息
  .doctor-info {
    margin: 25px 40px 12px;
    min-width: auto;
    padding: 25px;
    height: 402px;
    background: #E8FFFF;
    border-radius: 0 0 40px 40px ;
    border: 3px solid #5999D5;
    overflow: hidden;
    .picture {
      border-radius: 20px;
      overflow: hidden;
      width: 260px;
      border: none;
      height: 351px;
      background: transparent;
      flex-shrink: 0;
      float: left;
      img {
        width: 100%;
        object-fit: contain;
        display: block;
      }
    }

    .info {
      margin-left: 280px;
      height: 351px;
      border-radius: 25px;
      border: 3px solid #5999D5;
      overflow: hidden;
      .left-info{
        float: left;
        width: 220px;
        .name {
          font-size: 56px;
          line-height: 90px;
          font-weight: 500;
          :deep(.scrollText) {
            justify-content:center;
          }
        }

        .level {
          height: 56px;
          line-height: 56px;
          background: #0B4A15;
          border-radius: 14px;
          font-weight: 500;
          font-size: 30px;
          color: #fff;
          margin: 0 12px;
          .scrollText {
            display: block;
            text-align: center;
            :deep(.st-inner) {
              margin: 0;
            }
          }
        }
        .doctor-code{
          text-align: center;
          font-weight: 500;
          padding-top: 15px;
          div.describe{
            font-size: 30px;
            height: 55px;
            line-height: 55px;
            color: #0B4A15;
          }
          img{
            display: block;
            width: 135px;
            object-fit: contain;
            margin: 0 auto;
          }

        }
        .scrollText {
          justify-content: left;
          align-items: start;
          align-self: start;
          text-align: left;

          :deep(.st-inner) {
            margin: 0;
          }
        }
      }


      .doctor-connect {
        margin-left: 220px;
        padding: 20px;
        border-left: 3px solid #5999D5;
        text-align: justify;
        background: rgba(204, 248, 255, 1);
        height: 100%;
        overflow: hidden;
        .container {
          width: 100%;
          height: 100%;
          line-height: 1.5;
          font-weight: 500;
          font-size: 30px;
          color: rgba(11, 74, 21, 1);
          text-align: justify;
          font-style: normal;
        }
      }
      &.info-mode-2{
        .left-info{
          float: none;
          width: 100%;
          text-align: center;
          .name {
            width: 45%;
            display: inline-block;
            vertical-align: top;
          }

          .level {
            width: 45%;
            display: inline-block;
            vertical-align: top;
            margin: 17px 12px;
          }
          .doctor-code{
            display: none;
          }
          .scrollText {
            justify-content: left;
            align-items: start;
            align-self: start;
            text-align: left;

            :deep(.st-inner) {
              margin: 0;
            }
          }
        }
        .doctor-connect {
          margin-left: 0;
          border-left: none;
          border-top: 3px solid #5999D5;
        }
      }
    }

  }


  //患者信息
  .patient-info {
    margin: 0 40px;
    .item {
      overflow: hidden;
      .title {
        text-align: center;
        line-height: 112px;
        height: 112px;
        background: #E8FFFF;
        font-weight: 800;
        font-size: 56px;
        border-bottom: 3px solid #5999D5;
        overflow: hidden;
      }

      .content {
        background: transparent;
        border: none;
        overflow: hidden;
        p {
          width: 100%;
          text-align: left;
          padding-left: 40px;
          height: 100px;
          font-weight: 500;
          font-size: 50px;
          color: #FFD356;
          line-height: 100px;
          @include singleEllipsis(100%)
        }
      }

      .current-patient-info {
        height: 100%;
        display: flex;
        align-self: center;
        align-items: center;

        .scroll-info {
          width: 100%;
          overflow: hidden;
          margin-top: 10px;
          height: calc(100%);
          p {
            height: 100%;
            width: 100%;
            line-height: 248px;
            font-weight: 800;
            font-size: 100px;
            color: #0B4A15;
            @include singleEllipsis(100%)

          }
        }
      }
    }

    .current-patient {
      border: 3px solid #5999D5;
      height: 360px;
      overflow: hidden;
      margin-top: 12px;
      .title{
        color: #0B4A15;
      }
      .content{
        height: 248px;
        line-height: 248px;
        background: #E8FFFF;
        font-weight: 800;
        font-size: 100px;
        color: #0B4A15;
        .no-scroll-info{
          height: 100%;
          width: 100%;
          line-height: 248px;
          font-weight: 800;
          font-size: 100px;
          color: #0B4A15;
          text-align: center;
          padding: 0;
          @include singleEllipsis(100%)
        }
      }
    }
    .wait-body{
      height: 426px;
    }
    .wait-patient {
      float: left;
      width: 662px;
      height: 100%;
      background: rgba(4, 119, 231, 1);
      border: 3px solid #5999D5;
      .title {
        background: rgba(4, 119, 231, 1);
        font-weight: 800;
        font-size: 56px;
        color: #FFD356;
      }
      .content{
        height: 314px;
        width: 100%;
        .wait-wrap{
          width: 100%;
        }
        &.scroll-area{

          .no-scroll-area-4,
          .no-scroll-area-5,
          .no-scroll-area-6{
            p{
              float: left;
              width: 50%;
              padding: 0 10px;
              font-size: 35px;
              height: 80px;
              line-height: 80px;
            }
          }
          .scroll{
            height: 100%;
            overflow: hidden;
            .patient{
              float: left;
              width: 50%;
              padding: 0 10px;
              font-size: 35px;
              height: 80px;
              line-height: 80px;
            }
          }

        }
      }
      &.wait-patient-2,
      &.wait-patient-1{
        .content{
          display: flex;
          align-items: center;
          justify-items: center;
        }
      }
      &.wait-patient-5,
      &.wait-patient-6,
      &.wait-patient-4{
        .content{
          display: flex;
          align-items: center;
          justify-items: center;
          p{
            float: left;
            width: 50%;
            padding: 0 10px;
            font-size: 35px;
            height: 80px;
            line-height: 80px;
          }
        }
      }
    }

    .wait-right{
      margin-left: 662px;
      background: #fff;
      height: 100%;
      .ewm-body{
        height: 296px;
        padding: 14px;
        img{
          display: block;
          height: 100%;
          max-width: 100%;
          object-fit: contain;
          margin: 0 auto;
        }
      }
      .ewm-tips{
        margin-top: 15px;
        height: 100px;
        font-weight: 500;
        font-size: 32px;
        color: #0B4A15;
        line-height: 1.5;
        text-align: center;
        padding: 0 15px;
      }
    }



    //隐藏等待患者情况下--就诊患者的样式
    .hide-waiting-patient {
      height: auto;
      min-height: inherit;
      overflow: hidden;
      flex-direction: column;

      .title {
        width: 100% !important;
        height: 222px;
        font-size: 80px;
        justify-content: center;
      }

      .content {
        width: 100% !important;
        max-height: inherit;
        justify-content: center;

        p {
          padding-left: 0;
          font-size: 124px;
          line-height: 464px;
          text-align: center;
        }
      }
    }
  }

}
</style>
